<template>
  <div class="table-box">
    <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getTableList">
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="handleOpenDialog(OptEnum.CREATE)"> 新增发票抬头 </el-button>
      </template>
      <template #type="scope">
        <el-tag :type="scope.row.type === sysEnum.ONE ? 'primary' : 'info'">
          {{ filterEnum(scope.row.type, billType) }}
        </el-tag>
      </template>
      <template #operation="scope">
        <el-button type="primary" :icon="Edit" size="small" text @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          编辑
        </el-button>
        <el-button type="danger" :icon="Delete" size="small" text @click="handleDeleteItem(scope.row)">删除</el-button>
      </template>
    </ProTable>
    <BillRiseDialog ref="dialogRef" @refresh-list="handleRefreshList" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { Edit, Delete } from "@element-plus/icons-vue";
import { getBillRiseVoListApi, deleteBillRiseApi } from "@/api/modules/cpyjob/billrise";
import { ColumnProps } from "@/components/ProTable/interface";
import { OptEnum, sysEnum } from "@/biz/eenum/appEnum";
import { filterEnum } from "@/utils";
import { billType } from "@/biz/datas/appData";
import BillRiseDialog from "./components/BillRiseDialog.vue";
import { useHandleData } from "@/hooks/useHandleData";
const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({});

// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  // 这边可以处理一下参数
  // let newParams = JSON.parse(JSON.stringify(params));
  // newParams.createDate && (newParams.startDate = newParams.createDate[0]);
  // newParams.createDate && (newParams.endDate = newParams.createDate[1]);
  // delete newParams.createDate;
  return getBillRiseVoListApi(params) || [];
};
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 80, fixed: "left" },
  //   { type: "index", label: "#", width: 60 },
  {
    prop: "type",
    label: "抬头类型",
    width: 100,
    enum: billType,
    search: { el: "select" }
  },
  {
    prop: "companyName",
    label: "公司名称",
    search: { el: "input" }
  },
  {
    prop: "billNo",
    label: "公司税号",
    search: { el: "input" }
  },
  {
    prop: "billAddress",
    label: "注册地址"
  },
  {
    prop: "phone",
    width: 110,
    label: "注册电话"
  },
  {
    prop: "bankName",
    label: "开户银行"
  },
  {
    prop: "bankAccount",
    label: "银行帐号"
  },
  {
    prop: "email",
    label: "收邮票箱"
  },
  {
    prop: "operation",
    width: 200,
    fixed: "right",
    label: "操作"
  }
];

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

// 删除信息
const handleDeleteItem = async (params: any) => {
  await useHandleData(deleteBillRiseApi, { id: params.id! }, `确认删除【${params.companyName}】的发票抬头信息`);
  pTable.value.getTableList();
};

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  // console.log("开票弹窗", params);
  dialogRef.value.acceptParams(params);
};
</script>
<style scoped lang="scss">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
